
import React, { useEffect, useState } from "react"

import { AllServices } from "./api/api"
import { Image } from "antd-mobile";
import './css/All.css'
import { useHistory } from "react-router-dom";


export default function Services() {
  const history = useHistory()
  const [list, setlist] = useState([])
  const All = async () => {
    const res = await AllServices()
    setlist(res.data.rows)
  }

  useEffect(() => {
    All()

  }, [])
  const jump = (link: any) => {
    history.push(link)
  }
  return (
    <div className="all">
      <div>
        {
          list.map((item: any, index: any) => {
            return (
              <div onClick={() => { jump(item.link) }} className="header" key={item.id}>
                <div style={{ display: 'flex', justifyContent: 'center', padding: '10px 0 ' }}>
                  <Image className="img" src={'http://124.93.196.45:10001/' + item.imgUrl} />
                </div>
                <div >
                  {item.serviceName}
                </div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}